<template>
  <!-- 小视频 -->
  <div class="small-video">
    <!-- 左边列表 -->
    <ul class="left-list" ref="left">
      <li
        class="left-li"
        v-for="(item, index) in leftList"
        :key="item.id + item.images[0] + index"
      >
        <!-- 图片 -->
        <div class="big-pic">
          <img :src="item.images[0].url" />
        </div>

        <!-- 介绍 -->
        <div class="title">
          <p>{{ item.title }}</p>
        </div>

        <!-- 信息 -->
        <div class="info">
          <!-- 头像 -->
          <img :src="item.user.avatarurl" alt="" />
          <!-- 名字 -->
          <span class="name">{{ item.user.nickName }}</span>
          <!-- 点赞 -->
          <p class="good">
            <span><van-icon name="good-job-o" /></span>{{ item.upCount }}
          </p>
        </div>
      </li>
      <li ref="leftb"></li>
    </ul>
    <!-- 左边列表 -->

    <!-- 右边列表 -->
    <ul class="left-list" ref="right">
      <li
        class="left-li"
        v-for="(item, index) in rightList"
        :key="item.images[0] + item.id + index"
      >
        <!-- 图片 -->
        <div class="big-pic">
          <img :src="item.images[0].url" />
        </div>

        <!-- 介绍 -->
        <div class="title">
          <p>{{ item.title }}</p>
        </div>

        <!-- 信息 -->
        <div class="info">
          <!-- 头像 -->
          <img :src="item.user.avatarurl" alt="" />
          <!-- 名字 -->
          <span class="name">{{ item.user.nickName }}</span>
          <!-- 点赞 -->
          <p class="good">
            <span><van-icon name="good-job-o" /></span>{{ item.upCount }}
          </p>
        </div>
      </li>
      <li ref="rightb"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 0, // 偏移页数
      // 存放数据列表
      videoList: [],
      // 左边列表
      leftList: [],
      // 右边列表
      rightList: [],
      // lefth: 0,
      key: 0,
      scrollShow: true,
    };
  },
  methods: {
    // 获取小视频数据
    async getShortVideo() {
      await this.axios.get("/video/short/" + this.page).then((res) => {
        // console.log(res.feeds);
        // 把数据统一放到一个数组里面
        this.videoList.push(...res.feeds);
      });
    },
    // 判断左右俩边那边的高度比较高
    getDecisionHeight() {
      let lefth = this.$refs.left.clientHeight;
      let righth = this.$refs.right.clientHeight;
      // console.log(lefth, righth);
      if (this.key == this.videoList.length) {
        return;
      }

      if (lefth <= righth) {
        this.leftList.push(this.videoList[this.key]);
      } else {
        this.rightList.push(this.videoList[this.key]);
      }
      this.key++;
    },

    // 触底刷新
    windowScroll() {
      // console.log(this.scrollShow);
      if (this.scrollShow) {
        this.scrollShow = false;
        // 滚动距离scrollTop，指的是滚动卷去的距离
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        // 获取左右俩边列表对底部的离顶部的距离
        let leftoffsetTop = this.$refs.leftb.offsetTop;
        let rightoffsetTop = this.$refs.rightb.offsetTop;
        // 判断谁大就给要判断的值。
        let load =
          leftoffsetTop >= rightoffsetTop ? leftoffsetTop : rightoffsetTop;
        // 获取窗口的内容高度
        let clientHeight = window.innerHeight;

        // console.log(scrollTop, load, clientHeight);
        // 判断触底，页面卷去的距离+窗口的距离，如果超过最下面的节点距离就触发
        if (scrollTop + clientHeight >= load) {
          this.page++;
          // this.page = 10 * this.page;

          // console.log(this.page);
          this.getShortVideo();
          setTimeout(() => {
            this.getDecisionHeight();
          }, 500);
        }
      }
      // 3秒后才可以继续加载数据
      setTimeout(() => {
        this.scrollShow = true;
      }, 3000);
    },
  },
  computed: {},

  // 请求数据
  created() {
    this.getShortVideo();
  },
  mounted() {
    // 因为请求数据比较久，所以也做了一个定时器。
    setTimeout(() => {
      if (this.videoList) {
        this.getDecisionHeight();
      }
    }, 2000);
    window.addEventListener("scroll", this.windowScroll);
  },
  // 销毁组件，或者离开的时候要移除
  beforeDestroy() {
    window.removeEventListener("scroll", this.windowScroll);
  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener("scroll", this.windowScroll);
    next();
  },
  beforeUpdate() {
    // 有时候数据还没加载出来，所以加个定时器缓一缓
    setTimeout(() => {
      this.getDecisionHeight();
    }, 10);
  },
};
</script>

<style lang="scss" scoped>
// 小视频
.small-video {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 100px;
  background-color: #f1f1f1;

  // 左边列表
  .left-list {
    width: 49%;
    // background-color: #77f;

    // 循环列表
    .left-li {
      border-radius: 10px;
      overflow: hidden;
      background-color: #fff;
      margin-top: 10px;
      // 图片
      .big-pic {
        width: 100%;
        img {
          width: 100%;
          height: auto;
        }
      }
      // 标题
      .title {
        padding: 5px 5px 0;
        font-size: 18px;
        line-height: 24px;

        // 文本超出
        overflow: hidden;
        text-overflow: ellipsis; /* 超出部分省略号 */
        word-break: break-all; /* break-all(允许在单词内换行。) */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
      }
      // 信息
      .info {
        width: 100%;
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // 头像
        img {
          width: 20px;
          height: 20px;
          display: inline-block;
          border-radius: 50%;
          padding: 0 5px;
        }

        // 名字
        .name {
          flex: 1;
        }
        // 点赞
        .good {
          width: 50px;
        }
      }
    }
  }
  .btn {
    position: fixed;
    bottom: 20%;
    left: 50%;
  }
}
</style>